<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<!-- 轮播图+创作板 -->
		<view class="banner">
			<u-swiper :indicator="true" keyName="file_path" height="320" :list="banner"></u-swiper>
			<view class="plate">
				<textarea v-model="text" placeholder-style="color:#Fff" placeholder="请输入描述你想生成画的关键词" />
			</view>
		</view>
		<!-- 推荐关键词 -->
		<view class="keywords">
			<view class="head">
				<view class="left">
					<view class="icon">
						<u--image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/8b560e2a814621864477c4bb71ee80ea.png"
							width="45rpx" height="36rpx" mode="heightFix"></u--image>
					</view>
					<view class="title">Prompt示例</view>
				</view>
				<view class="right" @click="getRandPrompt">
					<view class="title">换一批</view>
					<view class="icon">
						<u--image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16710052169572933344.png"
							width="33rpx" height="29rpx" mode="heightFix"></u--image>
					</view>
				</view>
			</view>
			<view class="lists">
				<view @click="onClickPrompt(index)" :class="index == prompt_active?'item active':'item'"
					v-for="(item,index) in prompt" :key="index">{{ item.text }}</view>
			</view>
		</view>

		<!-- 选择创作风格 -->
		<view class="style">
			<view class="head">
				<view class="left">
					<view class="icon">
						<u--image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/8b560e2a814621864477c4bb71ee80ea.png"
							width="45rpx" height="36rpx" mode="heightFix"></u--image>
					</view>
					<view class="title">选择创作风格</view>
				</view>
			</view>
			<view class="lists">
				<view @click="onClickStyle(index)" :class="style_active == index?'item active':'item'"
					v-for="(item,index) in style" :key="index">
					<view class="radio">
						<u-radio-group value="radio">
							<u-radio activeColor="#F22E38" name="radio">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="cover">
						<u--image :src="item.image.file_path" width="200rpx" height="200rpx" mode="heightFix"
							radius="5"></u--image>
					</view>
					<view class="title">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<!-- 尺寸 -->
		<view class="size">
			<view class="head">
				<view class="left">
					<view class="icon">
						<u--image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/8b560e2a814621864477c4bb71ee80ea.png"
							width="45rpx" height="36rpx" mode="heightFix"></u--image>
					</view>
					<view class="title">创作尺寸</view>
				</view>
			</view>
			<view class="lists">
				<view :class="size_active==index?'item active':'item'" @click="onClickSize(index)"
					v-for="(item,index) in size" :key="index">{{ item }}</view>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="btn-action" v-if="isShowLog == 0">
			<view class="btn-group">
				<view class="btn rand">
					<u-button open-type="share" icon="share" color="#dd6161" :plain="true" shape="circle" text="分享好友">
					</u-button>
				</view>
				<view class="btn start" @click="doDraw">
					<button class="btn-normal">
						<view class="title">立即创作</view>
						<view class="small">创作一次将消耗{{ conf.coin }}金币</view>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		style,
		start
	} from '@/api/draw.js';
	import {
		config,
		jump
	} from '@/api/system.js';
	import {
		insert
	} from '@/utils/ad.js';
	import {
		detail
	} from '@/api/user.js';
	export default {
		data() {
			return {
				operate_dm: true,
				isShowLog: 0,
				timer_dm: null,
				banner: [],
				prompt_active: 0,
				style_active: 0,
				size_active: 0,
				size: [
					'1024*1024', '1024*1536', '1536*1024'
				],
				prompt: [],
				text: "",
				style: [],
				share: {},
				conf: {},
				BasicsPrompt: [{
					"style": "水彩",
					"text": "青绿色草地连成一片，山间起伏，有倾泻的流水，星星点缀天空，蓝天白云，天色泛白，巨幅画面感，遥拍视角，4K，高清"
				}, {
					"style": "油画",
					"text": "红色灯笼，长城，秋天，高清，奇幻风格，史诗感，艺术站，超现实主义"
				}, {
					"style": "卡通",
					"text": "金凤凰，背景绚烂，高饱和，古风，仙境，高清，4K，古风"
				}, {
					"style": "探索无限",
					"text": "天空中有颗巨大的心，光线柔和，心形光圈，写实风格"
				}, {
					"style": "探索无限",
					"text": "这是一幅中国画风格的画，画的是山上一个宁静的湖泊，头顶上有一片清澈的蓝天"
				}, {
					"style": "探索无限",
					"text": "短发，高清，精致面容，细节清晰，少年，二次元，cg感"
				}, {
					"style": "探索无限",
					"text": "蓝色星体漂浮在破碎的红色城堡之上，概念艺术，吉姆·马霍德风格"
				}, {
					"style": "探索无限",
					"text": "海滩，落日，棕榈树，莫奈风格"
				}, {
					"style": "探索无限",
					"text": "云上的繁华都市中，世界传说，仙境，插画作品, 超现实主义"
				}, {
					"style": "探索无限",
					"text": "穿着时尚潮牌的一只大熊猫，日出，大步向我们走来，赛博朋克，烟雾"
				}, {
					"style": "油画",
					"text": "超级逼真的未来世界，真实照片，虚幻引擎"
				}, {
					"text": "戴贝雷帽的女孩，银色的长发，白色的斗篷，手拿气球，日本动漫风格"
				}, {
					"text": "中国山水画，青山绿水，溪水长流，古风，青山相看两不厌，丹青水墨，中国风"
				}, {
					"text": "抹茶味奶茶，古香书桌，安静的环境，落地窗外天清云淡,写实主义"
				}, {
					"text": "古长城，烽火台，山河无恙，国泰民安, 超现实主义"
				}, {
					"text": "钛合金，机甲兔子，赛博朋克，未来感，设计作品，cg感，摄影棚光照, 未来主义"
				}, {
					"text": "心脏，人类的器官，钢铁材质，机械感，精致，细节清晰，未来科技，未来主义"
				}, {
					"text": "泰迪熊穿着西服在时代广场跳舞，细节清晰，高清，8k"
				}, {
					"text": "一只带着酷酷眼镜的蒸汽朋克猫portait，在艺术界大行其道，蒸汽波艺术"
				}]
			};
		},
		onLoad() {
			this.getConf()
			this.getRandPrompt()
			this.getStyle()
			this.getBanner()
			this.getSpool()
			this.getShare()
			this.getUser()
		},
		onShareTimeline() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.user_id) {
				referee_id = _this.userInfo.user_id
			}
			return {
				imageUrl: _this.share.share.image_url,
				title: _this.share.share.title,
				path: '/pages/main/draw/index?referee_id=' + referee_id
			}
		},
		onShareAppMessage() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.user_id) {
				referee_id = _this.userInfo.user_id
			}
			return {
				imageUrl: _this.share.share.image_url,
				desc: _this.share.share.desc,
				title: '@'+_this.share.share.title,
				path: '/pages/main/draw/index?referee_id=' + referee_id
			}
		},
		methods: {
			getUser() {
				detail({}).then(res => {
					this.userInfo = res.data.userInfo
				}).catch(err => {

				})
			},
			getShare() {
				config({
					key: 'draw'
				}).then(res => {
					this.share = res.data.config
				}).catch(err => {

				})
			},
			getSpool() {
				let _this = this;
				config({
					key: 'spool'
				}).then(res => {
					_this.spool = res.data.config
					if (_this.spool.insert.status == 10) {
						insert.load(_this.spool.insert.id)
						insert.show()
					}
				}).catch(err => {

				})
			},
			getBanner() {
				jump({
					local: 30
				}).then(res => {
					this.banner = res.data.jump
				}).catch(err => {

				})
			},
			getConf() {
				config({
					key: 'draw'
				}).then(res => {
					this.conf = res.data.config
				}).catch(err => {

				})
			},
			doDraw() {
				uni.showModal({
					title: "温馨提示",
					content: "是否确认消耗" + this.conf.coin +
						"金币进行AI创作绘画？",
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...'
							})
							start({
								draw_text: this.text,
								draw_style: this.style[this.style_active].value,
								draw_size: this.size[this.size_active]
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									uni.showModal({
										title: "温馨提示",
										content: "任务已提交，前往任务详情！",
										showCancel: false,
										success: () => {
											uni.navigateTo({
												url: '/pages/draw/detail/index?task_id=' +
													res.data.task_id
											})
										}
									})
								}
							}).catch(err => {
								uni.hideLoading()
							})
						}
					},
				})
			},
			onClickSize(index) {
				this.size_active = index
			},
			getStyle() {
				style({}).then(res => {
					this.style = res.data.style
				}).catch(err => {

				})
			},
			onClickStyle(index) {
				this.style_active = index
			},
			onClickPrompt(index) {
				this.prompt_active = index
				this.text = this.prompt[index].text
			},
			getRandPrompt() {
				this.prompt = this.getRandomArrayElements(this.BasicsPrompt, 4)
				this.text = this.prompt[this.prompt_active].text
			},
			getRandomArrayElements(arr, count) {
				var shuffled = arr.slice(0),
					i = arr.length,
					min = i - count,
					temp, index;
				while (i-- > min) {
					index = Math.floor((i + 1) * Math.random());
					temp = shuffled[index];
					shuffled[index] = shuffled[i];
					shuffled[i] = temp;
				}
				return shuffled.slice(min);
			}
		},
		onPageScroll(e) {
			/* 滚动时隐藏操作按钮，停止滚动再显示操作按钮 */
			this.isShowLog = 2;
			clearTimeout(this.timer_dm)
			// 告知标识 -> 开始滚动
			this.operate_dm = false;
			this.timer_dm = setTimeout(() => {
				this.isShowLog = 0;
				// 告知标识 -> 结束滚动
				this.operate_dm = true;
			}, 300);
		}
	}
</script>

<style lang="scss">
	.size {
		width: 92%;
		margin: 15rpx auto;

		.lists {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				background-color: #fff;
				padding: 10rpx 30rpx;
				border-radius: 10rpx;
				color: #666;
				border: 1rpx solid #666;
				margin-bottom: 10rpx;
				font-size: 24rpx;
			}

			.active {
				color: #F22E38;
				border: 1rpx solid #F22E38;
				background-color: #FFDEE0;
			}
		}

		.head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					font-size: 28rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					margin-right: 15rpx;
				}
			}
		}
	}

	.play {
		width: 92%;
		margin: 15rpx auto;

		.lists {
			display: flex;
			flex-direction: row;

			.item {
				background-color: #FFDEE0;
				padding: 10rpx 30rpx;
				border-radius: 10rpx;
				height: 30rpx;
				color: #F22E38;
				border: 1rpx solid #F22E38;
				margin-bottom: 10rpx;
				font-size: 24rpx;
			}
		}

		.head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					font-size: 28rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					margin-right: 15rpx;
				}
			}
		}
	}

	.style {
		width: 92%;
		margin: 15rpx auto;

		.lists {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 30rpx;

				.title {
					margin-top: 15rpx;
				}

				.radio {
					display: none;
				}

				.cover {
					border: 5rpx solid #fff;
					border-radius: 10rpx;
					overflow: hidden;
				}
			}

			.active {
				position: relative;

				.radio {
					display: block;
					position: absolute;
					right: -20rpx;
					top: -15rpx;
					z-index: 999;
				}

				.cover {
					border: 5rpx solid #F22E38;
				}

				color: #F22E38;
			}
		}

		.head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					font-size: 28rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					margin-right: 15rpx;
				}
			}
		}
	}

	.keywords {
		width: 92%;
		margin: 15rpx auto;

		.lists {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				background-color: #fff;
				padding: 10rpx 15rpx;
				border-radius: 10rpx;
				color: #666;
				border: 1rpx solid #666;
				max-width: 128rpx;
				margin-bottom: 10rpx;
				font-size: 24rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.active {
				color: #F22E38;
				border: 1rpx solid #F22E38;
				background-color: #FFDEE0;
			}

		}

		.head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 15rpx;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					font-size: 28rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					margin-right: 15rpx;
				}
			}
		}
	}

	page {
		background-color: #fff;
		padding-bottom: 120rpx;
	}

	.btn-action {
		width: 90%;
		position: fixed;
		bottom: 0rpx;
		left: 4%;
		height: 120rpx;

		.btn-group {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.rand {
				width: 40%;

				.u-button {
					height: 100rpx;
				}
			}

			.start {
				width: 55%;

				.btn-normal {
					height: 100rpx;
					line-height: normal;
					font-size: 28rpx;
					border-radius: 50rpx;
					background-color: #f22e38;
					border: none;
					color: #f4f4f5;
					display: flex;
					flex-direction: column;
					justify-content: center;
					box-shadow: 3rpx 3rpx 10rpx #dd6161;

					.title {
						font-weight: bolder;
					}

					.small {
						font-size: 24rpx;
					}
				}

				.btn-normal::after {
					border: initial;
				}
			}
		}
	}

	.banner {
		width: 92%;
		margin: 15rpx auto;
		position: relative;

		.plate {
			width: 90%;
			min-height: 200rpx;
			background-color: #fff;
			position: absolute;
			bottom: 15rpx;
			left: 5%;
			background: rgba(255, 255, 255, .3);
			backdrop-filter: blur(10rpx);
			border-radius: 15rpx;
			box-shadow: 0rpx 0rpx 10rpx #fff;

			textarea {
				width: 90%;
				text-align: center;
				color: #f4f4f5;
				font-weight: bolder;
				vertical-align: middle;
				padding: 30rpx;
				height: 170rpx;
				background-color: transparent !important;
			}
		}
	}
</style>
